<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列车订票系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .box-card {
            margin-bottom: 20px;
        }
        .train-detail {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }
        .station-info {
            text-align: center;
        }
        .station-name {
            font-size: 24px;
            font-weight: bold;
        }
        .station-time {
            font-size: 16px;
            color: #606266;
            margin-top: 5px;
        }
        .train-no {
            font-size: 14px;
            color: #909399;
            text-align: center;
        }
        .duration-arrow {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #909399;
        }
        .seats {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .seat-card {
            width: 220px;
            margin: 0 15px 15px 0;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        .seat-card.selected {
            border-color: #409EFF;
            box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.5);
        }
        .price {
            color: #F56C6C;
            font-weight: bold;
            font-size: 18px;
        }
        .passenger-checkbox-group .el-checkbox {
            display: block;
            margin-bottom: 10px;
        }
        .summary-card .el-divider--horizontal {
            margin: 15px 0;
        }
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .total-price-container {
            text-align: right;
            margin-top: 20px;
        }
        .total-price-label {
            color: #606266;
            font-size: 16px;
        }
        .total-price-value {
            color: #F56C6C;
            font-size: 24px;
            font-weight: bold;
        }
        .action-buttons {
            margin-top: 20px;
        }
        .action-buttons .el-button {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <el-row :gutter="20">
            <el-col :span="16">
                <el-card class="box-card">
                    <div slot="header">
                        <span>列车信息</span>
                    </div>
                    <div class="train-detail">
                        <div class="station-info">
                            <div class="station-name">{{ trainInfo.startStation }}</div>
                            <div class="station-time">{{ trainInfo.startTime }}</div>
                        </div>
                        <div class="duration-arrow">
                            <div class="train-no">{{ trainInfo.trainNum }}</div>
                            <i class="el-icon-right"></i>
                            <div>{{ trainInfo.duration }}</div>
                        </div>
                        <div class="station-info">
                            <div class="station-name">{{ trainInfo.endStation }}</div>
                            <div class="station-time">{{ trainInfo.endTime }}</div>
                        </div>
                    </div>
                </el-card>

                <el-card class="box-card">
                    <div slot="header">
                        <span>选择座位类型</span>
                    </div>
                    <div class="seats">
                        <el-card v-for="seat in seatsFormatted" :key="seat.code"
                                 class="seat-card"
                                 :class="{ 'selected': selectedSeat === seat.code }"
                                 @click.native="selectSeat(seat.type, seat.remaining, seat.code)">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div>
                                    <strong>{{ seat.type }}</strong>
                                    <p>余票: {{ seat.remaining }}</p>
                                </div>
                                <span class="price">¥{{ seat.price }}</span>
                            </div>
                        </el-card>
                    </div>
                </el-card>

                <el-card class="box-card">
                    <div slot="header">
                        <span>选择乘客</span>
                    </div>
                    <el-checkbox-group v-model="selectedPassengers">
                        <el-checkbox v-for="passenger in passengers"
                                     :label="passenger.id"
                                     :key="passenger.id"
                                     border>
                            {{ passenger.name }} ({{ formatIdType(passenger.idType) }}: {{ passenger.idCard }})
                        </el-checkbox>
                    </el-checkbox-group>
                </el-card>
            </el-col>

            <el-col :span="8">
                <el-card class="box-card summary-card" shadow="always">
                    <div slot="header">
                        <span>订单摘要</span>
                    </div>
                    <div class="summary-item" v-if="selectedSeat !== ''">
                        <span>座位类型</span>
                        <span>{{ getSeatType(selectedSeat) }}</span>
                    </div>
                    <div class="summary-item" v-if="selectedSeat !== ''">
                        <span>单价</span>
                        <span>¥{{ getSeatPrice(selectedSeat) }}</span>
                    </div>
                    <el-divider v-if="selectedPassengerDetails.length > 0"></el-divider>
                    <div v-if="selectedPassengerDetails.length > 0">
                        <div class="summary-item" v-for="p in selectedPassengerDetails" :key="p.id">
                            <span>乘客 ({{ formatPassengerType(p.type) }})</span>
                            <span>{{ p.name }}</span>
                        </div>
                    </div>
                    <div v-else>
                        <p style="color: #909399; text-align: center;">请从左侧选择乘客</p>
                    </div>
                    <el-divider></el-divider>
                    <div class="total-price-container">
                        <span class="total-price-label">订单总额：</span>
                        <span class="total-price-value">¥{{ totalPrice }}</span>
                    </div>
                    <div class="action-buttons">
                        <el-button type="primary" @click="submitOrder" :disabled="!canSubmit">提交订单</el-button>
                        <el-button @click="cancelOrder" style="margin-top: 10px; margin-left: 0;">取消</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>

<script src="../../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted(){
            console.log("mounted");
            this.bookTicketId=localStorage.getItem('bookTicketId');
            this.getTrainInfo();
            this.getPassenger();
        },
        data() {
            return {
                bookTicketId: 10000,
                trainInfo: {
                    id: 10000,
                    trainNum: 'G1234',
                    startStation: '北京南',
                    endStation: '上海虹桥',
                    startTime: '2025-06-23 08:00',
                    endTime: '2025-06-23 12:30',
                    duration: '4小时30分钟',
                    distance: 1318,
                    remainClass0: 10,
                    remainClass1: 25,
                    remainClass2: 0,
                    remainClass3: 5,
                },
                selectedSeat: '',
                // 改动: passengers 数据中的 idType 和 type 已更新为数字代码
                passengers: [
                    { id: 1, name: '张三', idType: 0, idCard: '110101199001011234', type: 0 }, // 身份证, 成人
                    { id: 2, name: '李四', idType: 1, idCard: 'E12345678', type: 0 },          // 护照, 成人
                    { id: 3, name: '王小五', idType: 0, idCard: '310105201508152426', type: 1 },// 身份证, 儿童
                    { id: 4, name: '赵六', idType: 2, idCard: 'H87654321', type: 2 },         // 港澳台通行证, 学生
                ],
                selectedPassengers: []
            }
        },
        computed: {
            seatsFormatted() {
                const train = this.trainInfo;
                return [
                    {code: 0, type: '商务座', price: Math.round(train.distance * 1.5), remaining: train.remainClass0 > 0 ? train.remainClass0 : '售罄' },
                    {code: 1, type: '一等座', price: Math.round(train.distance * 0.8), remaining: train.remainClass1 > 0 ? train.remainClass1 : '售罄' },
                    {code: 2, type: '二等座', price: Math.round(train.distance * 0.5), remaining: train.remainClass2 > 0 ? train.remainClass2 : '售罄' },
                    {code: 3, type: '无座', price: Math.round(train.distance * 0.45), remaining: train.remainClass3 > 0 ? train.remainClass3 : '售罄' }
                ];
            },
            selectedPassengerDetails() {
                return this.passengers.filter(p =>
                    this.selectedPassengers.includes(p.id)
                );
            },
            totalPrice() {
                if (this.selectedSeat === '' || this.selectedPassengers.length === 0) {
                    return 0;
                }
                const price = this.getSeatPrice(this.selectedSeat);
                return this.selectedPassengerDetails.length * price;
            },
            canSubmit() {
                return this.selectedSeat !== '' && this.selectedPassengers.length > 0;
            }
        },
        methods: {
            getSeatType(code) {
                const seat = this.seatsFormatted.find(s => s.code === code);
                return seat ? seat.type : '';
            },
            // 新增: 格式化证件类型的方法
            formatIdType(code) {
                switch (code) {
                    case 0: return '身份证';
                    case 1: return '护照';
                    case 2: return '港澳台通行证';
                    default: return '未知';
                }
            },
            // 新增: 格式化乘客类型的方法
            formatPassengerType(code) {
                switch (code) {
                    case 0: return '成人';
                    case 1: return '儿童';
                    case 2: return '学生';
                    case 3: return '残疾军人';
                    default: return '未知';
                }
            },
            getSeatPrice(seatCode) {
                const seat = this.seatsFormatted.find(s => s.code === seatCode);
                return seat ? seat.price : 0;
            },
            selectSeat(seatType, remaining, seatCode) {
                if (remaining === '售罄') {
                    this.$message.error('该席位已售罄，无法选择！');
                    return;
                }
                this.selectedSeat = seatCode; // 存储数字代码
            },
            submitOrder() {
                const order = {
                    bookTicketId: this.bookTicketId,
                    seatType: this.selectedSeat,
                    passengers: this.selectedPassengerDetails,
                    totalPrice: this.totalPrice
                };

                var _this = this;
                axios({
                    method: "put",
                    url: "http://localhost:8080/order/create",
                    data: order
                }).then(function (resp) {
                    if(resp.data.code === 1){
                        _this.$message({
                            message: `订单提交成功！5秒后将自动跳转... 总价：¥${order.totalPrice}`,
                            type: 'success',
                            duration: 5000 // 消息显示5秒
                        });
                        console.log('提交订单成功:', resp.data);

                        // 设置5秒后跳转
                        setTimeout(function() {
                            window.location.href = 'bookTicket.html';
                        }, 5000);
                    }
                    else {
                        _this.$message({
                            showClose: true,
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(function(error) {
                    _this.$message({
                        showClose: true,
                        message: '订单提交失败: ' + error.message,
                        type: 'error'
                    });
                });
            },
            cancelOrder() {
                this.$confirm('确定要清空所有选择吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.selectedSeat = '';
                    this.selectedPassengers = [];
                    this.$message({
                        type: 'info',
                        message: '已清空选择'
                    });
                });
            },
            getTrainInfo(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/dailyRemainTicket/getTrainInfo",
                    params: {
                        id: this.bookTicketId
                    }
                }).then(function (resp) {
                    _this.trainInfo=resp.data.data;
                })
            },
            getPassenger(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/passenger/list",
                }).then(function (resp) {
                    _this.passengers=resp.data.data;
                })
            },



        }
    });
</script>
</body>
</html>